<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>源辰-零食网购物车</title>
<!-- 此页面已经放入front目录下 -->
<base href="../"/>
<meta name="keywords" content="小吃,美食,零食,源辰" />
<meta name="description" content="各种小吃美食，应有尽有" />
<link href="images/yc.png" rel="shortcut icon" type="image/x-icon" />
<link href="css/header.css" rel="stylesheet" type="text/css" />
<link href="css/cart.css" rel="stylesheet" type="text/css" />
<link href="css/footer.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- 顶部区域 -->
<header id="header">
	<!-- 顶部标题区域 -->
	<div class="htitle">
    	<a href="#" target="_blank" class="location">衡阳</a>
        
        <!-- 登陆会员检查 和 会员信息展示 -->
        <div class="header-info" id="login_info">
            <div class="login-info" >
            	<a v-if="isLogin" href="user.html" title="个人信息" target="_blakn">欢迎您: {{memberInfo.nickName}}</a>
            	<a v-else href="login.html" title="点击登录">您好，请登录</a>
                <a href="register.html" title="点击注册"> 免费注册 </a>
            </div>
            
            <div class="person-info">
            	<span>|</span>
            	<a href="front/order.html" target="_blank">我的订单</a>
                <span>|</span>
                <a href="#" target="_blank">我的小吃</a>
                <span>|</span>
                <a href="#" target="_blank">客户服务</a>
                <span>|</span>
           		<a href="#" target="_blank">个人信息</a>
            </div>
        
        </div>
    </div>
    
    <!-- 顶部搜索区域 -->
    <div class="search">
    	<div class="search_left">
    		<a href="front/index.html" title="首页">
            	<img src="images/logo.png" width="260px" height="120px"/> 
            </a>
        </div>
        
        <div class="search_right">
        	<div class="search_top">
                <div class="search_div">
                    <input type="search" class="search-ipt" placeholder="请输入要搜索的内容" ref="gname" id="search"/>
                    <input type="button" class="search-btn" @click="search"/>  
                </div>
                <div class="buycart">
                	<i class="iconfont">{{cartCount}}</i>
                    <a href="front/cart.html" target="_blank">我的购物车</a>
                </div>
            </div>
            
            <!-- 类型渲染 -->
            <div class="search_item" id="search_item">
            	<a href="javascript:void(0)" class="selected" @click="findByTno(0, '')">全部</a>
            	<a href="javascript:void(0)" v-for="(type, index) in types" 
            		@click="findByTno(index + 1, type.tno)" :data-tno="type.tno">{{type.tname}}</a>
            		<!-- vue给标签绑定自定义数据  :data-tno -->
            </div>
        </div>
    </div>
</header>

<!-- 购物车 -->
<article id="app">
    <div class="cart_con">
    	<h2 class="total_count">全部商品<em id="totalcount">{{totalCount}}</em>件</h2>
    	<div class="cart_list_th clearfix">
        	<ul>
            	<li class="col01">商品名称</li>
            	<li class="col02">商品单位</li>
                <li class="col03">商品价格(元)</li>
                <li class="col04">数量</li>
                <li class="col05">小计</li>
                <li class="col06">操作</li>
            </ul>
        </div>
    	<div class="cart_list_td clearfix" id="cart_list">
       		<ul v-for="item in carts">
        		<li class="col01">
        			<input type="checkbox" :checked=" item.mno ? true : false" @change="changeChecked($event, item)" ref="check">
       			</li>
            	<li class="col02"><img :src="item.pics"></li>
                <li class="col03">{{item.gname}}<br><em>{{item.price}}元/{{item.unit}}</em></li>
                <li class="col04">{{item.weight}}</li>
                <li class="col05">{{item.price}}</li>
                <li class="col06">
                	<div class="num_add">
                    	<a href="javascript:void(0)" @click="lostOrAdd(item, -1)" class="minus fl">-</a>
                        <input type="text" v-model="item.num" class="num_show fl">
                        <a href="javascript:void(0)" @click="lostOrAdd(item, 1)" class="add fl">+</a>
                    </div>
                </li>
                <li class="col07" v-html="(item.price * item.num).toFixed(2)"></li>
                <li class="col08"><a href="javascript:;" @click="delGoods( item.cno)">删除</a></li>
            </ul>
    
        </div>
    	<div class="setElements">
        	<ul>
            	<li class="col01"><input type="checkbox" ref="all" checked id="all" @click="bindInfo"></li>
            	<li class="col02"><label for="all">全选</label></li>
                <li class="col03">合计(不含运费)：<span>&yen;</span>
                <em id="totalPrices">{{totalPrices}}</em><br>共计
                <b id="totalNumbers">{{totalCount}}</b>件商品</li>
                <li class="col04"><a href="javascript:void(0)"  @click="gotoPay">去结算</a></li>
                <!-- front/pay.html  target="_blank"-->
            </ul>
        </div>
    </div>
</article>

<footer>
	<div class="foot_link">
        <a href="#">关于我们</a> <span> | </span>
        <a href="#">联系我们</a> <span> | </span>
        <a href="#">招聘广告</a> <span> | </span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight &copy; 2019 <a class="copy" href="http://www.hyycinfo.com" target="_blank">衡阳市源辰信息科技有限公司</a> All Rights Reserverd</p>
    <p>电话：0734-8355998 湘ICP备16015987号-1</p>
</footer>
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<!-- <script src="js/cart.js" type="text/javascript"></script> -->

<!-- 依次引入相关JS文件 -->
<script type="text/javascript" src="js/vue/vue.js"></script>
<script type="text/javascript" src="js/vue/axios.js"></script>
<script type="text/javascript" src="js/vue/qs.js"></script>

<!-- 引入检查登陆和 类型 购物车 公共JS文件 -->
<script type="text/javascript" src="js/base.js"></script>

<script type="text/javascript">
	// 构建Vue实例
	let app = new Vue({
		el: "#app",
		data:{
			carts: [],// 购物车信息
			totalPrices: 0,// 总价
			totalCount: 0,// 总件数
		},
		mounted(){
			// 默认查询路用户所有的购物车详情
			axios.get("cart/finds").then( res=>{
				if( res.status != 200){
					showMsg("访问出错，请稍后重试...", "red", ()=>{ location.href="index.html"});
					return;
				}
				if( res.data.code == 500){
					showMsg("购物车空空如也，马上去选吧...", "blue", ()=>{ location.href="index.html"});
					return;
				}
				if (res.status == 200 && res.data.code == 200){
					this.carts = res.data.data;  // 所有购物车信息
					// 遍历购物车信息
					this.carts.forEach((item, index) => {
						this.totalCount += item.num;  // 总数量
						this.totalPrice += item.num * item.price;  // 总价格
						
						item.mno = 1;  // 默认选中的标记  我们将商品选中的标记暂存到mno中 如果时1 说明被选中 否则 未选中 0
					})
					// 格式化总价 保留两位小数
					this.totalPrices = this.totalPrices.toFixed(2);
					
					this.$nextTick(function(){  // 执行一次 需要视图更新之后
						this.bindInfo();
					})
				}
			})
			
		},
		methods:{ // 先空实现 
			changeChecked(event, obj){ //单个商品的选中
				if (event.target.checked){  // 该商品被选中
					obj.mno = 1;
					let checkBoxs = app.$refs.check;  // 所有的复选框
					for (let item of checkBoxs){
						if (!item.checked){  // 说明有未选中的商品
							app.$refs.all.checked = false;
							this.getTotal();  // 重新统计价格
							return false;
						}
					}
					app.$refs.all.checked = true;
				}else{
					obj.mno = 0;
					app.$refs.all.checked = false;
				}
				this.getTotal();  // 重新统计价格
			},
			getTotal(){ // 数量变动 总价变化
				this.totalPrices = 0,  // 总价
				this.totalCount = 0,   // 总件数
				this.carts.forEach((item, index) => {
					if (item.mno == 1){  // 说明该商品被选中 才计算价格
						this.totalCount += item.num;  // 总数量
						this.totalPrices += item.num * item.price;   //总价格
					}
				})
				// 格式化总价  保留两位小数
				this.totalPrices = this.totalPrices.toFixed(2);
			},
			bindInfo(){   // 全选或全不选
				let flag = app.$refs.all.checked;  // 全选的状态
				for (let item of app.$refs.check){  // 所有的复选框
					app.$refs.all.checked = flag;
				}
				this.changeAll(flag);
			},
			changeAll( choic){ // 改变所有  全选不全不选
				let flag = choic ? 1 : 0;
				this.carts.forEach((item, index) => {
					item.mno = flag;  // 将每一个商品选中
				})
				this.getTotal();
			},
			lostOrAdd(item, num){ // 商品数量变化
				let val = item.num;
				if (num < 0 && val <= 1){  // 商品少于1 无法操作
					return;
				}
				// TODO 同步更新操作
				axios.post("cart/update", qs.stringify({num, cno : item.cno})).then(res => {
					if (res.status == 200 && res.data.code == 200){
						item.num += num;  // 同步界面数据
						this.getTotal();
					}
				})
			},
			delGoods( cnos ){ // 删除购物车
				if (confirm("亲，商品一旦删除将不能恢复，您确定要删除吗")){
					axios.post("cart/deletes", qs.stringify({cnos})).then(res => {
						// 同步前端vue数据  将carts对应的购物车移除
						if (res.status == 200 && res.data.code == 200){
							this.carts.forEach((item, index) => {
								if (cnos == item.cno){  // 意味着一种购物车
									this.carts.splice(index, 1);
									return false;  // 结束循环
								}
							})
							this.getTotal();
							showMsg("删除购物车成功...", "green");
							return;
						}
						showMsg("删除购物车失败...", "red");
					})
				}
				
			},
			gotoPay(){ // 去支付
				let cnos = [];
				// 获取用户勾选的商品  对应的购物车编号
				this.carts.forEach((item, index) => {
					if (item.mno == 1){
						cnos.push(item.cno);  // 取出购物车编号 cno 存入数组
					}
				})
				console.log(cnos);
				if (cnos.length <= 0){
					showMsg("请选择你要购买的商品!!!", "red");
					return;
				}
				/*cnos = cnos.join(",");
				location.href = "front/pay.html?" + cnos;*/
				// 需求 勾选的购物车编号 1，2 并显示在支付界面 -> 本地存储 localStorage 持久性存储类型
				//localStorage.removeItem("cnos");   // 移除本地存储的购物车信息
				localStorage.setItem("cnos", cnos.join(","));  // 将数组都以逗号的方式拼接成字符串 存储在键 cnos中
				location.href = "front/pay.html";
			}
		}
	})
	
	
	// 全选或不选
	function bindInfo(){
		$("#all").click(function(){
			let flag = $(this).prop("checked");  // 全选的状态
			$("#cart_list .col01>input").prop("checked", flag);
			changeAll(flag);   // 同步vue数据
		})	
		
	}

</script>
</body>
</html>
